<template>
	<view>
		<view>
			<button @click="btnClick">搜索</button>
			<u-picker :mode="pickermode" :defaultTime="stime" v-model="pickershow" :params="params"
				@confirm="confirm" :defaultSelector="defaultSelector">
			</u-picker>
		</view>
		<view>
			<div style="margin-top: 10px;">
				<table style="width: 100%;border: 0px;text-align: center;">
					<tr>
						<td>
							<div class="div-circle small" style="width: 110px;height: 110px; margin:0px auto;border: 6px solid #007AFF;border-radius: 50%; text-align: center;">
								<p style="margin-top:26px;font-size: 16px;color: black;">日累计水量</p>
								<strong><p style="font-size: 26px;color:#007AFF;;text-align: center" id="PatrolValue">{{ undefined != sum ? p.changeTwoDecimal(sum,1) : "0" }}</p></strong>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</view>
		<u-line style="padding-top: 16rpx;" class="u-line" :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
		<view style="line-height: 60rpx;margin-top: 10px; ">
			<div class="div-class-title">
				<img src="/static/contact/ranking.png" style="width: 20px;margin-left: 10px;vertical-align: middle;" />
				<span style="margin-left: 10px;vertical-align: middle; ">南排工程（水量：万方）</span>
			</div>
		</view>
		<view class="page-box">
			<view  class="order" v-for="(item,index) in result" :key="index" :padding="padding" :border="border">
				<view class="bottom">
					<view class="logistics btn">{{item.STNM}}</view>
					<view class="evaluate btn">{{ undefined != item.PSL ? p.changeTwoDecimal(item.PSL,1) : "0" }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getWaterVolume } from './api/api.js'
	export default {
		data() {
			return {
				result: [],
				borderColor: '#e4e7ed',
				align: 'center',
				border: true,
				padding:20,

				//选择器
				pickershow: false,
				stime: '',
				pickermode: 'time',
				defaultSelector: [0],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
				},
				sum:0,
				
				direction: 'row',
				hairLine: true,
				length: '100%',
				color: '#DDDDDD',
				borderStyle: 'solid'
			}
		},
		name: "WaterVolume",
		onLoad(options) {
			
		},
		mounted() {
			this.stime = new Date(new Date().addDate("d", -10)).Format("YYYY-MM-DD");
			this.search();
		},
		methods: {
			search() {
				var _data = {
					STIME: this.stime + " 00:00:00",
					ETIME: this.stime + " 23:59:59",
					PID: "2020111918235851921"
				};
				var _param = {}
				_param.data = _data;
				getWaterVolume(_param).then(res => {
					this.result = res.data;
					var listData = this.result;
					this.sum = 0;
					for(var i= 0 ;i< listData.length; i++) {
						if(undefined != listData[i].PSL)
							this.sum += listData[i].PSL;
					}
				})

			},
			btnClick(index) {
				this.pickermode = 'time';
				this.pickershow = true;
			},
			confirm(e) {
				this.stime = '';
				if (this.pickermode == 'time') {
					if (this.params.year) this.stime += e.year;
					if (this.params.month) this.stime += '-' + e.month;
					if (this.params.day) this.stime += '-' + e.day;
					if (this.params.hour) this.stime += ' ' + e.hour;
					if (this.params.minute) this.stime += ':' + e.minute;
					if (this.params.second) this.stime += ':' + e.second;
				}
				this.search();
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
	
	
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		
		border: 2rpx solid $u-border-color;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-warning-dark;
			}
		}
		.item {
			display: flex;
			margin: 20rpx 0 0;
			.left {
				margin-right: 20rpx;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
		.bottom {
			display: flex;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
			.btn {
				width: 360rpx;
				text-align: center;
				color: $u-type-info-dark;
			}
			.evaluate {
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				color: #007AFF;
			}
		}
	}
</style>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	/* background-color: #f2f2f2; */
	background-color: $u-bg-color;
}
.div-circle {
	width: 130px;
	height: 130px;
	border: 6px solid #007AFF;
	border-radius: 50%;
	/*text-align: center;	*/
}
.div-class-title {
	line-height: 30px;
	font-size: 18px;
}
/* #endif */
</style>
